<template>
  <div class="userList_dia">
    <MyDialog v-bind="$attrs">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="密码" prop="passWord" v-if="isModAdd === 'add'">
          <el-input type="password" v-model="ruleForm.passWord" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="密码" v-else>
          <el-input type="password" v-model="ruleForm.passWord" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="电话" prop="phone" v-if="isModAdd === 'add'">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="ruleForm.roleType" :disabled="route.path.indexOf('userinfo/index') != -1"
            placeholder="请选择身份" clearable style="width: 120px;">
            <el-option label="管理员" :value="1" />
            <el-option label="老师" :value="2" />
            <el-option label="学生" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="ruleForm.gender" placeholder="请选择">
            <el-option label="男" :value="0" />
            <el-option label="女" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="头像">
          <UploadImg v-model:fileListProps="ruleForm.avatarUrl" />
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineOptions, provide, inject, watch } from "vue";
import UploadImg from "@/components/base/UploadImg.vue";
import MyDialog from "@/components/base/MyDialog.vue";

import { useRoute } from "vue-router";

import { ElMessageBox } from "element-plus";
const route = useRoute();

import { addUserApi, editUserApi1 } from "@/api/index";
import { ElMessage, } from "element-plus";

defineOptions({
  inheritAttrs: false,
});
const props = defineProps(["queryCount", "editItem"]);
const emit = defineEmits(["update:editItem", "update:queryCount"]);
// 规则
const rules = reactive({
  userName: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    }
  ],
  passWord: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    }
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    }
  ],
  email: [
    {
      required: true,
      message: "请输入邮箱",
      trigger: "blur",
    }
  ],
  gender: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change",
    }
  ],
});
//表单
const ruleForm = reactive({
  userName: "",
  passWord: "",
  phone: null,
  roleType: 3,
  email: "",
  gender: "",
  avatarUrl: [],
});
const isModAdd = ref("add");
const ruleFormRef = ref(null);
// 提交函数
const submitForm = (cb) => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", ruleForm);
      const params = {
        userName: ruleForm.userName,
        passWord: ruleForm.passWord,
        phone: ruleForm.phone,
        roleType: ruleForm.roleType,
        email: ruleForm.email,
        gender: ruleForm.gender,
        avatarUrl: ruleForm.avatarUrl[0],
      }
      if (isModAdd.value == 'add') {
        addUserApi(params).then((res) => {
          if (res.code !== "10000") {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
            return;
          }
          ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
          });
          ruleFormRef.value.resetFields();
          cb()
          emit("update:queryCount", props.queryCount + 1);
        })
      } else {
        delete params.phone;
        if (!params.passWord) {
          delete params.passWord;
        }
        editUserApi1(ruleForm.id, params).then((res) => {
          if (res.code !== "10000") {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
            return;
          }
          ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
          });
          ruleFormRef.value.resetFields();
          cb()
          emit("update:queryCount", props.queryCount + 1);
        })
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const Show = inject("SHOW");
watch(
  () => Show.value,
  (newVal) => {
    if (newVal) {
      if (Object.keys(props.editItem).length > 0) {
        Object.assign(ruleForm, props.editItem);
        ruleForm.roleType = ruleForm.roleType + 1
        if (props.editItem.avatarUrl) {
          ruleForm.avatarUrl = [props.editItem.avatarUrl];
        } else {
          ruleForm.avatarUrl = [];
        }
        isModAdd.value = "edit";
      } else {
        ruleForm.userName = "",
          ruleForm.passWord = "",
          ruleForm.phone = null,
          ruleForm.roleType = '3',
          ruleForm.email = "",
          ruleForm.gender = "",
          ruleForm.avatarUrl = [],

          isModAdd.value = "add";
      }
    } else {
      emit("update:editItem", {});
    }
  }
);

const cancelForm = () => {
  Show.value = false;
  // emit("update:editItem", {});
};
provide("SUBMITFORM", submitForm);
provide("ONCANCEL", cancelForm);
onMounted(() => {
  console.log("onMounted,,弹窗组件");
});
</script>
<style scoped lang="scss"></style>
